<template>
    <div>
      <!-- ! 拿到父传子的数据渲染列表 -->
      <input placeholder="输入关键字搜索" v-model.trim="search"  @keyup.enter="handleSearch">
      <table class="my-table">
        <thead>
          <tr>
            <th>就诊日期</th>
            <th>医生姓名</th>
            <th>诊断结果</th>
            <th>处方信息</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in records" :key="index">
            <td>{{item.date}}</td>
            <td>{{ item.doctor }}</td>
            <td>{{item.diagnosis}}</td>
            <td>{{item.prescription  }}</td>
            <td @click="detail(index)">详情</td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
  <script>
  import Bus from '../utils/EventBus'
  export default{
    props:{
      records:Array
    },
    
    data(){
      return{
        // ! 表单双向绑定
        search:'',
        // ! 设置空数组接收父传子数据
        newDetail:[]
      }
    },
    methods:{
      handleSearch(){
        // ! 通过子传父，将表单数据传给父组件
        this.$emit('search',this.search)
      },
      detail(id){
        // ! 找到当前点击的详情数据通过事件总线传递给兄弟组件
        const detail= this.records.find((item,index)=>id===index )
        this.newDetail=[detail]
        Bus.$emit('sendDetail',this.newDetail)
    }
    },
  
  }
</script>

  <style scoped>
    .my-table {
      border-collapse: collapse;
      width: 100%;
    }
  
    .my-table td, .my-table th {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }
  
    .my-table th {
      background-color: #f2f2f2;
    }
  </style>
  